<template>
  <div id="content">
    <div>
      <div class="header">
      <van-image
        round
        width="10rem"
        height="10rem"
        :src='require("@/assets/logo.png")'
      />
      <h4>欢迎注册STORE LIVE</h4>
    </div>
      
      <div class="input-box">
        <div>
          <label for="username">用户名</label>
          <input
            type="text"
            name="username"
            v-model="username"
            placeholder="请输入用户名"
          />
        </div>
        <div>
          <label for="password">密码</label>
          <input
            type="password"
            name="password"
            v-model="password"
            placeholder="请输入密码"
          />
        </div>
         <div>
          <label for="username">地址</label>
          <input
            type="text"
            name="address"
            v-model="address"
            placeholder="请输入地址"
          />
        </div>
        <div>
        <van-form validate-first @failed="onFailed">
          <label for="tel">电话号码</label>
          <van-field
            v-model="tel"
            name="pattern"
            placeholder="请输入电话号码"
            :rules="[{ pattern, message: '请输入有效的11位号码' }]"
          />
        </van-form>
        </div>
        <van-button
        round
        type="info"
        size="large"
        color="rgb(24, 154, 100)"
        @click="register"
        class="button-box"
        >注册</van-button
      >
     <router-link to="/">
        <p>已有账号？去登录</p>
      </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from "vant";


export default {
  data() {
    return {
      username: "",
      password: "",
      address: "",
      tel:'',
      pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
    };
  },
  methods: {
    
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    
    register() {
      axios
        .post("/api/register.php", {
          username: this.username,
          password: this.password,
          address: this.address,
          tel: this.tel,
        })
        .then((response) => {
          this.$store.commit("updataLogin", true);
          Toast.success("注册成功");
          localStorage.setItem("username", this.username);
          this.$router.push("/");
        });
    },
  },
};
</script>
<style scoped>
.header {
  margin: 20% auto;
  text-align: center;
}
#content {
  padding: 10px;
  

}
#content input {
  width: 90%;
  padding: 10px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #e2f0e9;
}
.input-box {
  width: 80%;
  margin: 2% auto;
}
.input-box p{
  text-align: center;
}
</style>